The web is all about information, and you don't get very far into
presenting many kinds of information before you need to show something
as a list. Whether it be a list of subjects, of places to go. of links
to other sites or of chapters in document, chances are you have
already including some sort of list in any web pages you've made. You
can do this with a list of items separated by <BR> tags, but HTML has
tags specifically designed to present information in list formats.
**Keeping it in order
The two most used list formats are the ordered (numbered) and
unordered (bullet) lists. The numbered list starts with <OL> and ends
with </OL>, with each item on the list starting with <LI>. Note that
there's no need to end each item with </LI>, each <LI> is
automatically closed by the next <LI> or </OL>. Each item in the list
is automatically numbered, starting at one. For example:
<OL>
<LI>Introduction
<LI>Installation
<LI>Configuration
</OL>
will give a numbered list of chapters in a document.
You don't have to add a <BR> to the end of each line, the browser will
automatically start each list item on a new line. Each item in the
list can be a link, such as:
<OL>
<LI><A HREF="introduction.html">Introduction</A>
<LI><A HREF="installation.html">Installation</A>
<LI><A HREF="configuration.html">Configuration</A>
</OL>
The list elements, like so many HTML elements, can be nested. This
means that you could have a contents page for a set of web pages that
looks something like:
<OL>
<LI>Section 1
<OL>
<LI>Part 1
<LI>Part 2
<LI>Part 3
</OL>
<LI>Section 2
<OL>
<LI>Part 1
<LI>Part 2
<LI>Part 3
</OL>
<LI>Section 3
<OL>
<LI>Part 1
<LI>Part 2
<LI>Part 3
</OL>
</OL>
Browsers will generally indent each list, so it's clear what goes
where. The indentation in the HTML above makes no difference to the
final output, but it makes it a lot easier to see what you are doing
when writing it. To make it even clearer, you can change the type of
numbers used with the TYPE attribute, which takes five possible values
1 Arabic numerals (the default)
A Capital letters
a Lower case letters
I Capital Roman numerals
i Lower case Roman numerals
However, not all browsers display all of these types, IBrowse shows A
as a and I as i, and Voyager doesn't show any numbering in the current
version.
There may be times you want to start a numbered list with something
other than one, such as when you break a listing to include some
general text, and then restart it. The START attribute of <OL> allows
you to set the number of the first item in a list to a number of your
choice.
**Give it the bullet
Unordered lists, also called bullet lists, are used when you do not
want to number the list items. The basic syntax follows the same lines
as for an ordered list, the list is enclosed in <UL>...</UL> tags with
each item beginning with <LI>. Look at the files from last month on
the CD and you'll see home.html contained the following "menu"
<A HREF="shops.html">Shops</A><BR>
<A HREF="pubs.html">Pubs</A><BR>
<A HREF="amenities.html">Amenities</A><BR>
<A HREF="location.html">Location</A><BR>
Using a list this would look like:
<UL>
<LI><A HREF="shops.html">Shops</A>
<LI><A HREF="pubs.html">Pubs</A>
<LI><A HREF="amenities.html">Amenities</A>
<LI><A HREF="location.html">Location</A>
</UL>
Not only is this easier to work with, it looks better in the browser
too. We can nest it like the numbered lists, like so
<UL>
<LI><A HREF="shops.html">Shops</A>
<LI><A HREF="pubs.html">Pubs</A>
<UL>
<LI>The Red Lion
<LI>The Crown and Cushion
<LI>The Sportsmans Arms
</UL>
<LI><A HREF="amenities.html">Amenities</A>
<LI><A HREF="location.html">Location</A>
</UL>
Unordered lists have an advantage over ordered lists. You have to
specifically change the numbering style to make the nesting of ordered
lists clearer, but unordered lists automatically use a different style
of bullet for each level. You can change this with the TYPE attribute,
as for ordered lists, this time the alternatives are disc, circle and
square, but it's often better to let the browser take care of it for
you.
As well as nesting lists of the same type, you can also nest ordered
lists within unordered lists, and vice versa. the permutations are
endless and provide a very flexible, yet easy to navigate way of
presenting information and links in a text form, with little work. This
makes them ideal for any site that is subject to frequent updates,
there are other ways of presenting text that may give more options,
but none as quick and easy to use as lists.
**Useful, by definition
There is a third type of list, the Definition List. This has a
different format, and may appear less useful at first glance, but is a
powerful text formatting tool. Unlike the other lists, this one has
two entries for each list item, an example is the best way to show
it's intended use:
<DL>
<DT>CPU
<DD>Central Processing Unit
<DT>DMA
<DD>Direct Memory Access
</DL>
The <DT> tag is shown as a sub heading, the definition is normally
indented. You can alter the appearance by using style tags on the <DT>
items, and space it out with a P after each <DD> item.
While the name indicates that this tag was originally intended for
displaying glossaries and similar structures, the definition list can
be used in many other applications where you need paragraphs with
subheadings. By enclosing the contents of <DT> in <A NAME=..>..</A>
(see boxout) you can easily produce an indexed page, using an ordered
or unordered list to provide a contents list that links directly to
each item on the page.
Once you realise that neither the <DD> nor the <DT> tag are
compulsory, you can use <DL> for a much wider range of layouts. There
is no HTML tag to indent a block of text, some of the other tags such
as <BLOCKQUOTE> usually do this, but there is no consistency between
different browsers, <BLOCKQUOTE> is rendered in italic in some
browsers and plain text in others. Indenting a paragraph or block of
text is a common requirement, and it just happens that browsers
generally show the <DD> part of a definition list indented, so for
indented text all you need is:
<DL>
<DD>This text is indented
</DL>
or even
<DL><DD>This text is indented</DL>
if you are only indenting a few words on a line.
It's clear that the list tags are useful for far more than just
displaying lists, they add extra text formatting options too. Next
month we'll look at how tables can give you even more control over the
layout of a page, but this should be plenty to keep you going until
then.
Boxouts
=======
-- What's in a name?--
When we looked at the <A> tag previously, it was used with the HREF
attribute to jump to another document, but there is another attribute
to <A>, and another way to use HREF. NAME marks a specific place in a
document that you can jump to with HREF.
Let's say you want to list information on all the churches in your
town. You could set up a separate page for each one, but this could
get cumbersome, especially when you also add a separate page for each
pub, club, shop, cinema and so on. Alternatively you could have a
single page for churches (churches.html) with an "anchor" for each
church, like this
<H4><A NAME="stpeters">St Peters Church</A></H4>
some text
<P>
<H4><A NAME="methodist">Methodist Chapel</A></H4>
more text
Now you can jump to these with a link that will load the page and
display it starting at your named anchor with
<A HREF="churches.html#stpeters">St Peters Church</A>
You give the normal link to the page, either relative or absolute, and
add a # followed by the name of the anchor. To jump to an anchor in
the current document, use #name only in the reference, you could have
a list of the various churches at the top of churches.html something
like
<UL>
<LI><A HREF="#stpeters">St Peter's Church</A>
<LI><A HREF="#stmarys">St Mary's Church</A>
<LI><A HREF="#methodist">Methodist Chapel</A>
<LI><A HREF="#synagogue">Synagogue</A>
</UL>
--Keeping it legal--
Once you start mixing various elements of HTML you can start running
into problems. For example
<LI><H3>list item</H3> is legal but
<H3><LI>list item</H3> is not
These don't always show up when viewing your pages in a browser, since
it's part of a browsers job to interpret the HTML as best it can, even
if the HTML is wrong. However, once you depart from the straight and
narrow, you increase the risk of your pages appearing differently in
different browsers. Using a number of browsers to check your pages
helps, and AWeb has a strict mode that is far less tolerant of errors,
making it more useful for page development, but even this isn't
enough.
The definitive check for any HTML is to use the WWW Consortium's own
validation service, at http://validator.w3.org. CheckHTML, from the
comm/www directory of Aminet, is ideal for offline checking. This
checks pages against the official HTML specification so you can
consider it to be a pretty definitive evaluation of your pages.
Neither of these make any comment on the style, quality or content of
your pages, that's entirely up to you, there's no official WWW
specification for good taste (yet), but knowing that your HTML is
correct means that it should be displayed as you intend in any
graphical browser.
Illustrations
=============
Figure 1: An ordered list, note the various numbering styles
Figure 2: An unordered list, note the various bullet styles
Figure 3: A definition list, and an example of using <DD> for indenting